<template>
  <el-container id="app" style="position:relative">
    <el-header class="header" height="90">
      <el-row style="width:100%">
        <el-col :xs="12" :sm="4">
          <router-link to="/" class="logo">
            <img src="./assets/logo.png" alt="logo">
          </router-link>
        </el-col>
        <el-col :xs="12" :sm="8">
          <ul class="nav">
            <router-link to="/courses"><li class="nav-item">课程中心</li></router-link>
            <router-link to="/coding"><li class="nav-item">开始编程</li></router-link>
          </ul>
        </el-col>
        <el-col :xs="24" :sm="12">
          <div class="right">
            <div class="nav-search" v-show="ishiddensearch">
              <el-input
                v-model="keyword"
                placeholder="搜索课程">
                <el-button @click="search" slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </div>
            <ul v-if="!isLogin" class="nav login-nav">
              <router-link to="/login"><li class="nav-item">登录</li></router-link>
              <router-link to="/register"><li class="nav-item">注册</li></router-link>
            </ul>
            <ul v-else class="nav ">
                <li class="nav-item">
                  <el-dropdown trigger="click" size="medium" @command="handleCommand">
                    <el-button class="el-dropdown-link">
                        {{userInfo.nickname}}
                        <i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                    <el-dropdown-menu slot="dropdown" >                      
                     <el-dropdown-item command="/user/mycourse/">  我的课程 </el-dropdown-item>
                      <el-dropdown-item  command="/user/work/"> 作业中心 </el-dropdown-item>
                     <el-dropdown-item command="/user/profile/" >个人设置 </el-dropdown-item>
                     <el-dropdown-item @click.native="logout" class="nav-item">退出</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-main class="main">
    <router-view @toggleFooter="toggleFooter" @tooglesearch="toogleSearch" />
    </el-main>
    <el-footer height="140px" class="footer" v-show="showFooter">
      <ul class="us">
        <li>关于我们</li>
        <li>联系我们</li>
      </ul>
      <ul class="concat">
        <li class="concat-title">
          <img src="./assets/电话.png" alt="phone" class="icon-phone">
          <span class="concat-title__text">官方QQ群：</span>
          <span class="concat-title__text">  597696064</span>
        </li>
      </ul>
    </el-footer>
  </el-container>
</template>

<script>
import { getUserInfo, logout } from '@/utils/api'
import { isMobile, getCookie, delCookie } from '@/utils/fetch'
export default {
  name: 'App',
  data () {
    return {
      keyword: '',
      showFooter: true,
      ishiddensearch: true
    }
  },
  computed: {
    userInfo () {
      return this.$store.state.userInfo
    },
    isLogin () {
      return this.userInfo ? 1 : 0
      console.log(this.userInfo)
      // var cookie = getCookie('csrftoken')
      // if(cookie){
      //   if(this.userInfo){
      //     return 1
      //   }
      //   else{
      //     // delCookie('csrftoken')
      //     return 0
      //   }        
      // }
      // else{
      //   return 0
      // }

    }
  },
  async beforeMount () {
    if (!this.isLogin) {
      var storage = JSON.parse(sessionStorage.getItem('userInfo'))
      var cookie = getCookie('csrftoken')
      if(cookie){
        if(storage){
        this.$store.commit('setUserInfo', storage)
        }else{
          let res = await getUserInfo()
          if (res.error === '10') {
            this.$store.commit('setUserInfo', res.result)
          }
        }
      }
    }
    if (isMobile()) {
      if (['login', 'register', 'coding'].indexOf(this.$route.name) === -1) {
        if (this.isLogin) {
          this.$router.push('/coding')
        } else {
          this.$router.push('/login')
        }
      }
    }
  },
  methods: {

    handleCommand(command) {
        this.$router.push({path: command})
        console.log(command)
      },
    search () {
      // console.log(this.keyword)
      this.$router.push({ path: '/courses', query: { keyword: this.keyword } })
    },
    async logout () {
      let res = await logout()
      if (res.error === '10') {
        this.$notify({
          title: '退出成功',
          message: res.result,
          type: 'success'
        })
        this.$store.commit('logout')
        this.$router.push('/login')
      } else {
        this.$notify({
          title: '退出失败',
          message: res.result,
          type: 'error'
        })
      }
    },
    toggleFooter () {
      if(isMobile()){
        this.showFooter = !this.showFooter;
      }
    },
    toogleSearch () {
      this.ishiddensearch = !this.ishiddensearch;
    }
  }
}
</script>

<style lang="stylus">
// #app{
//   display: flex;
//   flex-flow: column;
//   min-height 100vh;
// }
// .content{
//   flex: 1
//   display flex;
//   flex-flow column
// }
// .footer{
//   flex: 0
// }
.terminal{
  background-color: #e4e4e4
  padding 0 10px
  & span{
    height: 28px;
    line-height: 28px;
    font-size: 18px;
    color: #000;
  }
  .cmd{
    background-color: #f5f7fa;
    &.blink{
      background-color: #25a2cb;
    }
  }
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
  color: inherit;
  text-decoration: none;
}
.header {
  height 60px;
  background: #222222;
  color: white;
  display: flex;
  align-items: center;
  padding: 0 15px;
  a {
    display: flex;
    align-items: center;
    height: 100%;
  }
  .nav {
    height: 100%;
    line-height: 43px;
    display: flex;
  }
  .user-nav {
    height: 100%;
    line-height: 43px;
    
  }
  .nav-item {
    height: 100%;
    padding: 0 15px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    cursor: pointer;
  }
  .right {
    // flex: 1;
    display: flex;
    justify-content: flex-end;
    height: 40px;
    .nav-search{
      flex 1;
      width 50%;
    }
    .login-nav{
      flex 0 0 125px;
    }
  }
}
.main {
  padding: 0;
  // min-height: calc(~'100vh - 200px');
  // height: 100%;
  overflow: initial;
}
.qq {
  max-width: 100%;
  height: auto;
  transform: scale(1.2)}
.footer {
  background: #222;
  height: 140px;
  color: #fff;
  display: flex;
  justify-content center;
  ul {
    width: 30%;
    min-width 150px;
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    box-sizing: border-box;
    &.us {
      padding: 20px 0;
    }
    &.concat {
      padding: 10px 0;
    }
  }
  .concat-title {
    display: inline-block;
    font-size: 20px;
  }
  .concat-title>* {
    vertical-align: middle;
  }
  .concat-item {
    font-size: 12px;
  }
}

// coding page style
@media only screen and (max-width: 768px) {
  .header {
    height 100px;
  }
}
</style>
